.hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      
      z-index: 2;
    }
    .next-gen-heading, .gaming-description {
      display: inline-block;
      perspective: 800px;
      transform-style: preserve-3d;
      transition: all 0.4s ease-in-out;
      position: relative;
    }
    .next-gen-heading {
      font-size: 3rem;
      font-weight: 700 !important;
      line-height: 1.2;
      max-width: 1000px;
      letter-spacing: -0.5px;
      color: #fff;
      cursor: pointer;
    }
    .gaming-description {
      font-size: 1.3rem;
      max-width: 700px;
      margin-top: 20px;
      color: #aaa;
      cursor: pointer;
    }
    #cursor {
      width: 20px;
      height: 20px;
      border: 2px solid white;
      border-radius: 50%;
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      transition: transform 0.15s ease-out;
      mix-blend-mode: difference;
    }
    .bg-loop-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
      mix-blend-mode: overlay;
      opacity: 0.05;
      pointer-events: none;
    }
    .bg-loop-text span {
      display: block;
      font-size: 5rem;
      color: white;
      white-space: nowrap;
      animation: scroll-left 20s linear infinite;
    }
    @keyframes scroll-left {
      from { transform: translateX(100%); }
      to { transform: translateX(-100%); }
    }
    .shader-glow {
      background: linear-gradient(90deg, #fff, #ff004f, #fff);
      background-size: 200% 100%;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: glowShift 3s infinite linear;
    }
    @keyframes glowShift {
      0% { background-position: 0% 0%; }
      100% { background-position: 200% 0%; }
    }
    .glitch {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background-image: repeating-linear-gradient(transparent, transparent 2px, rgba(255,255,255,0.03) 3px);
      mix-blend-mode: screen;
      animation: flicker 0.15s infinite;
    }
    @keyframes flicker {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }


    
/* Real blinking cursor */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: #fff;
  margin-left: 2px;
  animation: blink 0.8s step-end infinite;
  vertical-align: bottom;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}



#animated-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: #fff;
  margin-top: 20px;
}

#animated-paragraph {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  color: #fff;
  margin-top: 20px;
}
#animated-paragraph span {
  display: inline-block;
  margin-right: 4px;
  white-space: nowrap;
}


.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: middle;
}

.typo {
  color: #ff6b6b;
  text-decoration: underline wavy;
}

.char {
  will-change: transform, opacity;
}

/* Subtle texture overlay for realism */
.container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkEEjIZJ8QoXQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAADMUlEQVRo3u2aT0gUURzHP29nd11XzVxXzVw1M0sxKzI7eCg6dOjQoUMQdOjQoUMQdOjQoUMQdOjQoUMQdOjQoUMQdOjQoUOQHcJ+HTZ2Z3ZndmfWXQj6wjDz5r3f+37f+5v3mzfwH//xH/8w/gK0Wq0G4BxwGjgFHAcOAQeBXcA2sA6sAivAErAALABzwAzwHdgKq1cUQKvVjgKXgXPA0Qj1fgCvgGfAU2A9CkAUQKvVXgRuAKeSMAy8BB4Dj4C1KABRAK1Wex24CxxJ0TiwCjwAHgDfgjQKAmi12jHgPnA+Q+PAF+Au8ABYDwIIAmi12jHgEXApY+PAG+AW8D4IIATQarUHgKfAlYyNA2+B68C7IIAQQKvV7gOeAVcyNg68Aa4C74MAQgCtVrsXeAFczdg48Aq4AnwMAggBtFrtbuAlcC1j48Bz4DLwKQggBNBqtbuAV8D1jI0DT4BLwOcggBBAq9XuAF4DNzI2DjwGLgJfggBCAK1Wuw14A9zM2DjwCLgAfA0CCAG0Wu0W4C1wK2PjwEPgPPAtCCAE0Gq1m8A74HbGxoEHwDngRxBACKDVajeAWeBOxsaB+8BZ4GcQQAig1Wo3gVngbsbGgXvAGeBXEEAIoNVqN4A54F7GxoG7wGlgLQggBNBqtRvAPHA/Y+PAHeAUsB4EEAJotdoNYAF4kLFx4DZwElgPAggBtFrtJrAIPMzYOHALOA5sBAGEAFqtdgtYAh5lbBy4CRwDtoIAQgCtVrsFLAOPMzYO3ACOANtBACGA1mq1W8BX4EnGxoHrwCFgJwggBNBqtVvAN+BpxsaBq8BBYCcIIATQarXbwHfgWcbGgSvAAWAnCCAE0Gq1O8AP4HnGxoHLwH5gNwggBNBqtbvAT+BFxsaBS8A+YDcIIATQarV7wC/gZcbGgYvAXmA3CCAE0Gq1e8Bv4FXGxoELwB5gLwggBNBqtXvAH+B1xsaB88BuYD8IIATQarX7wB/gTcbGgXPAvw8PAK1WewD4C7zN2DhwFvgHUEsVYzZwxHIAAAAASUVORK5CYII=');
  opacity: 0.03;
  pointer-events: none;
  mix-blend-mode: overlay;
}














#animated-heading .char {
  display: inline-block;
  position: relative;
  padding: 6px 4px;
  margin: 2px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

#animated-heading .char::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  z-index: -1;
  background-size: 300% 300%;
  animation: borderSnake 2.5s linear infinite;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  padding: 2px;
}

@keyframes borderSnake {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}